<template>
<div>
  <div class="tabNav">
    <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b class="colors">/<router-link to="/taskManage">
        <img src="../assets/img/sidebar6.png" />任务列表
    </router-link></b>/
    <b>任务明细</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd" shadow="hover">
                <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                ref="multipleTable"
                >
                <el-table-column prop="id" align="center" label="任务ID"> </el-table-column>
                <!-- <el-table-column prop="businessName" align="center" label="企业名称">
                </el-table-column> -->
                <el-table-column prop="name" align="center" label="任务名称" width="120">
                </el-table-column>
                <el-table-column prop="taskPayment" align="center" label="预计服务费">
                </el-table-column>
                <el-table-column prop="businessName" align="center" label="任务接收人">
                </el-table-column>
                <el-table-column prop="legalPhone" align="center" label="接收人手机号">
                </el-table-column>
                <el-table-column prop="takeStatus" align="center" label="是否领取">
                  <template #default="item">
                     {{ takeStatus[item.row.takeStatus] }}
                    </template>
                </el-table-column>
                <el-table-column prop="isComplete" align="center" label="是否完成">
                  <template #default="item">
                     {{ isComplete[item.row.isComplete] }}
                    </template>
                </el-table-column>
                <el-table-column prop="bonus" align="center" label="奖励">
                </el-table-column>
                <el-table-column prop="fine" align="center" label="处罚">
                </el-table-column>
                <el-table-column prop="expectProfit" align="center" label="实际服务费">
                </el-table-column>
                <el-table-column prop="inspectedStatus" align="center" label="验收状态">
                  <template #default="item">
                     {{ inspectedStatus[item.row.inspectedStatus] }}
                    </template>
                </el-table-column>
                </el-table>
                <!-- <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination> -->
            </el-card>
        </el-col>
    </el-row>
</div>  
</template>
<script>
export default {
  props: ['search'],
  data() {
    return {
      inspectedStatus: {
        0: "待验收",
        1: "验收通过",
        2: "验收驳回",
      },
      isComplete: {
        0: "否",
        1: "是",
        2: "放弃",
      },
      takeStatus: {
        0: "否",
        1: "是",
      },
        userTaskShow: false,
        taskDelShow: false,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      tableData: [],
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [] // 选中的数据
    };
  },
  mounted() {
    this.getReceiveList();
  },
  methods: {
    getReceiveList() {
      // 获取明细列表信息
      this.$http({
        url: "/api/quick/business/task/taskDrawDetail",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          taskId: this.$route.query.id,
          pageNum: this.currentPage,
          pageSize: this.selectPage
        },
      }).then((data) => {
        console.log(data)
        if (data.code == 0) {
          // this.total = data.result.total;
          this.tableData = data.result.list
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getReceiveList();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getReceiveList();
    },
    handleSelectionChange() {},
    userTask() {
        this.userTaskShow = true;
    },
    taskDel() {
        this.taskDelShow = true;
    },
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0;
}
.cardTits .el-table .editor .el-button--text {
    margin-left: 0;
}
</style>
